<template>
  <div class="personal_center">
   <NavTop class="nav"></NavTop>
   <NavBlank></NavBlank>
   <div class="main">
    <div class="top-header">
        <img src="https://s1.hdslb.com/bfs/static/jinkela/account/assets/rl_top.png" alt="">
    </div>
    <div class="security_content">
        <div class="security-left">
        <span   class="security-title">个人中心</span>
        <ul   id="ser-ul" class="security-ul">
            <li   class="security-list">
                <i class="iconfont icon-shouyefill"></i> 
                <span   class="security-nav-name">首<b style="width:28px; display:inline-block"></b>页</span>
            </li>
            <li   class="security-list">
                <i   class="iconfont icon-wodedahuiyuan"></i> 
                <span   class="security-nav-name"><span style="letter-spacing: 7px;">大会员</span></span>
            </li>
            <li   class="security-list">
                <i   class="iconfont icon-huiyuanjifen"></i> 
                <span   class="security-nav-name">会员积分</span>
            </li>
            <li   class="security-list on">
                <i   class="iconfont icon-wodexinxi"></i>
                 <span   class="security-nav-name">我的信息</span>
                </li>
            <li   class="security-list">
                <i   class="iconfont icon-dkw_geren"></i> 
                <span   class="security-nav-name">我的头像</span>
            </li>
            <li   class="security-list">
                <i   class="iconfont icon-xinshouzhuangxiangl2"></i> 
                <span   class="security-nav-name">粉丝勋章</span>
            </li>
            <li   class="security-list">
                <i   class="iconfont icon-muyingwanju_muyingwanju"></i> 
                <span   class="security-nav-name">成就勋章</span>
            </li>
            <li   class="security-list">
                <i   class="iconfont icon-fanghuoqiang"></i> 
                <span   class="security-nav-name">账号安全</span>
            </li>
            <li   class="security-list">
                <i   class="iconfont icon-heimingdan"></i> 
                <span   class="security-nav-name">黑名单管理</span>
            </li>
            <li   class="security-list">
                <i   class="iconfont icon-taojinbi"></i> 
                <span   class="security-nav-name">我的硬币</span>
            </li>
            <li   class="security-list">
                <i   class="iconfont icon-quanbupinglun"></i> 
                <span   class="security-nav-name">我的记录</span>
            </li>
            <li   class="security-list">
                <i   class="iconfont icon-gerenrenzheng"></i> 
                <span   class="security-nav-name">实名认证</span>
            </li>
            <li   class="security-list">
                <i   class="iconfont icon-gerenzhongxin-yaoqinghaoyou"></i> 
                <span   class="security-nav-name">邀请注册</span>
            </li>
            <li   class="security-list">
                <i   class="iconfont icon-shezhi-xitongshezhi"></i> 
                <span   class="security-nav-name">通知设置</span>
            </li>
        </ul>
        </div>
    </div>
   </div>
  </div>
</template>

<script>
import NavTop from '@/components/nav-top'
import NavBlank from '@/components/nav-blank'
export default {
    name:"personal_center",
    components: {
        NavTop,
        NavBlank,
    }
}
</script>

<style scoped>
body {
    font: 12px/1.5 Microsoft YaHei,tahoma,"\5B8B\4F53",sans-serif;
    color: #b1b1b1;
    font-size: 12px;
    font-family: MicrosoftYaHei;
}
.nav {
    position: flex;
    color: #000000 !important;
    box-shadow: 0 2px 4px #00000014;
    background-color: white;
}
.top-header{
    background: #00a0d8;
    height: 86px;
    text-align: center;
    margin-bottom: 20px;
}

.security_content {
    overflow: hidden;
    width: 980px;
    height: 100%;
    margin: 10px auto 100px;
    border: 1px solid #e1e2e5;
    box-shadow: 0 2px 4px rgba(0,0,0,.14);
    background: #fafafa;
    border-radius: 4px;
}
.security-left {
    float: left;
    width: 150px;
    height: 100%;
    overflow: hidden;
}
.security-title {
    display: block;
    width: 150px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 16px;
    color: #99a2aa;
    cursor: default;
}
ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.security-ul li {
    overflow: hidden;
}

i{
    margin-left: 15PX;
    margin-right: 15PX;
}
.security-list {
    width: 150px;
    height: 48px;
    line-height: 48px;
}

.security-title, .security-ul {
    border-bottom: 1px solid #404e75;
}
.security-nav-name{
    font-size: 14px;
    color: #222222;
}
</style>